<div class="answer-container relative w-full flex flex-row items-start gap-2 md:gap-4 overflow-x-hidden group">
  <div class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center font-bold text-base aspect-square place-items-center">
    <div class="w-full h-full rounded-full relative">
      <img
        alt=""
        loading="lazy"
        width="24"
        height="24"
        decoding="async"
        data-nimg="1"
        class="w-full h-full object-cover rounded-full"
        style="color: transparent"
        src="/assets/images/chatbi.jpg"
      />
    </div>
  </div>
  <div class="flex-1 inline-flex flex-col items-start gap-y-3 overflow-hidden">
    <div class="answer-content flex-1 w-full flex flex-col items-stretch">
      <div class="w-full mb-1 font-semibold">
        {{'PAC.KEY_WORDS.Copilot' | translate: {Default: 'Copilot'} }}<span class="text-xs text-violet-500 bg-violet-500/10 px-1.5 py-1 rounded-full m-2">ChatBI</span>
      </div>

      @if (message().content) {
        <markdown clipboard class="w-full text-color"
          [clipboardButtonTemplate]="buttonTemplate"
          lineNumbers
          [start]="5"
          [data]="content()"
        />
      }
      @for (item of toArray(message().data); track trackByKey(item)) {
        @switch (typeof(item)) {
          @case ('string') {
            <markdown clipboard class="w-full text-color"
              [clipboardButtonTemplate]="buttonTemplate"
              lineNumbers
              [start]="5"
              [data]="$any(item)"
            />
          }
          @case ('object') {
            @if (isQuestions(item); as q) {
              <h3 class="my-2">{{'PAC.ChatBI.TryFollowing' | translate: {Default: 'You can also try the following'} }}:</h3>
              <ul class="list-disc pl-4">
                @for (question of q.questions; track question) {
                  <li class="my-2 text-sm"><a class="cursor-pointer" (click)="edit(question)">{{question}}</a></li>
                }
              </ul>
            }
            @if (isAnswer(item); as answer) {
              @if (answer.indicators) {
                <div class="flex flex-col justify-start items-stretch gap-2">
                  <p>{{ 'PAC.ChatBI.NewCalculatedMeasures' | translate: {Default: 'New calculated measures'} }}:</p>
                @for (id of answer.indicators; track id) {
                  @if (indicators()[id]; as indicator) {
                  <a class="w-full inline-flex items-center justify-between p-2 text-base font-medium cursor-pointer
                    text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-zinc-800 dark:hover:bg-zinc-700 dark:hover:text-white"
                    (click)="openIndicator(indicator, answer)">
                    <span class="flex-1">
                      <span class="w-full">{{indicator.name}}</span>
                      @if (indicator.unit) {
                        <span class="p-1 text-sm rounded-md bg-gray-100 dark:bg-zinc-600">{{indicator.unit}}</span>
                      }<br>
                      <span class="w-full text-sm">[{{indicator.code}}]</span><br>
                      <pre class="w-full p-1 text-xs rounded-md whitespace-pre-wrap bg-gray-100 dark:bg-zinc-900">{{indicator.formula}}</pre>
                      
                    </span>
                    
                    <svg class="w-4 h-4 ms-2 rtl:rotate-180 opacity-20 group-hover:opacity-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                  </a>
                  }
                }
                </div>
              }
              @if (answer.visualType) {
                <div class="answer-component flex-1 w-full" [cdkContextMenuTriggerFor]="contextMenu">
                  @switch (answer.visualType) {
                    @case ('table') {
                      <ngm-analytical-grid class="w-full h-[400px] group overflow-auto"
                        displayDensity="compact"
                        [dataSettings]="toGrid(answer.dataSettings)"
                        [slicers]="answer.slicers"
                        [options]="{showToolbar: true, paging: true, strip: true, sortable: true}"
                        [appearance]="{
                          displayDensity: DisplayDensity.compact
                        }"
                      >
                        <div class="flex-1 flex justify-start">
                          <button mat-icon-button displayDensity="cosy" class="shrink-0" [matTooltip]=" 'PAC.ChatBI.ShowChart' | translate: {Default: 'Show Chart'} "
                            (click)="answer.visualType = 'chart'"
                          >
                            <mat-icon fontSet="material-icons-outlined">pie_chart</mat-icon>
                          </button>
                        </div>
                      </ngm-analytical-grid>
                    }
                    @case ('chart') {
                      <ngm-analytical-card class="h-[300px] group" 
                        [dataSettings]="charts()[$index]?.dataSettings"
                        [chartOptions]="answer.chartOptions"
                        [chartSettings]="charts()[$index]?.chartSettings"
                        [options]="answer.options"
                        [slicers]="answer.slicers"
                        (explain)="setExplains($event)"
                      >
                        <div class="flex-1 flex justify-start">
                          <button mat-icon-button displayDensity="cosy" class="shrink-0" [matTooltip]=" 'PAC.ChatBI.ShowTable' | translate: {Default: 'Show Table'} "
                            (click)="answer.visualType = 'table'"
                          >
                            <mat-icon fontSet="material-icons-outlined">table_view</mat-icon>
                          </button>
                        </div>
                        <button mat-icon-button ngmAction displayDensity="compact" class="shrink-0" [matTooltip]=" 'PAC.ChatBI.AddtoStory' | translate: {Default: 'Add to Story'} "
                          (click)="$event.stopPropagation();$event.preventDefault();addToStory(answer)">
                          <mat-icon fontSet="material-icons-outlined"
                            [matTooltip]="''"
                          >addchart</mat-icon>
                        </button>
                        <button mat-icon-button ngmAction displayDensity="compact" class="shrink-0"
                          [matTooltip]=" 'Story.Widget.Explore' | translate: {Default: 'Explore'} "
                          (click)="$event.stopPropagation();$event.preventDefault();openExplore(item)">
                          <mat-icon fontSet="material-icons-outlined">explore</mat-icon>
                        </button>
                        <button mat-icon-button ngmAction displayDensity="cosy" class="ngm-menu-trigger"
                          [color]="answer.slicers ? 'accent':''"
                          [matMenuTriggerFor]="filtersMenu"
                          #mt="matMenuTrigger"
                          [class.active]="mt.menuOpen"
                          >
                          <mat-icon fontSet="material-icons-outlined">filter_alt</mat-icon>
                        </button>
                      </ngm-analytical-card>
            
                      <mat-menu #filtersMenu="matMenu" class="pac-widget__slicer-menu">
                        <div class="text-base font-semibold">{{ 'PAC.ChatBI.Slicers' | translate: {Default: "Slicers"} }}</div>
                        <ngm-slicers class="overflow-hidden" inline editable
                          [slicers]="answer.slicers"
                          [dataSettings]="answer.dataSettings"
                          [limit]="5"
                          [capacities]="[
                            SlicersCapacity.Variable,
                            SlicersCapacity.CombinationSlicer,
                            SlicersCapacity.AdvancedSlicer
                          ]"
                          (valueChange)="updateSlicers($event)"
                          (click)="$event.stopPropagation()"
                        />
                      </mat-menu>
                    }
                    @case ('kpi') {
                      <pac-widget-kpi class="h-[200px] group" displayDensity="compact"
                        [dataSettings]="charts()[$index]?.dataSettings"
                        [slicers]="answer.slicers"
                        [options]="{showToolbar: true, shortNumber: true, digitsInfo: '0.1-1'}"
                        (slicersChange)="updateSlicers($event)"
                        (explain)="setExplains($event)"
                      />
                    }
                  }
                </div>
              }
            }
          }
        }
      }

      @switch (message().status) {
        @case ('thinking') {
          <pac-chat-loading class="w-10 h-10" />
        }
        @case ('error') {
          <mat-error>{{message().error}}</mat-error>
        }
      }
    </div>
    <div class="flex items-center gap-3">
      <span class="text-stone-400 text-xs dark:text-stone-300">{{ message().createdAt | date: 'short' }}</span>
    </div>
  </div>
</div>

<button mat-icon-button displayDensity="cosy" class="ngm-fullscreen-button opacity-20 group-hover:opacity-100 transition-opacity"
  (click)="toggleFullScreen()"
  >
  @if (fullscreen()) {
    <mat-icon fontSet="material-icons-round">fullscreen_exit</mat-icon>
  } @else {
    <mat-icon fontSet="material-icons-round">fullscreen</mat-icon>
  }
</button>

<ng-template #buttonTemplate>
  <!-- <button mat-flat-button displayDensity="compact" class="ngm-rounded-full"
      (click)="run($event)">run</button> -->
  <button #copyButton mat-flat-button displayDensity="compact" class="ngm-rounded-full" (click)="onCopy(copyButton)">
    @if ($any(copyButton).copied) {
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0633 5.67375C18.5196 5.98487 18.6374 6.607 18.3262 7.06331L10.8262 18.0633C10.6585 18.3093 10.3898 18.4678 10.0934 18.4956C9.79688 18.5234 9.50345 18.4176 9.29289 18.2071L4.79289 13.7071C4.40237 13.3166 4.40237 12.6834 4.79289 12.2929C5.18342 11.9023 5.81658 11.9023 6.20711 12.2929L9.85368 15.9394L16.6738 5.93664C16.9849 5.48033 17.607 5.36263 18.0633 5.67375Z" fill="currentColor">
        </path>
      </svg>
    } @else {
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path>
      </svg>
    }
  </button>
</ng-template>

<ng-template #contextMenu>
  <div cdkMenu>
    <button cdkMenuItem [cdkMenuTriggerFor]="topMenu">
      <mat-icon>military_tech</mat-icon>
      <span class="flex-1">{{ 'PAC.KEY_WORDS.Top' | translate: {Default: 'Top'} }}</span>
      <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
    </button>
    <button cdkMenuItem [cdkMenuTriggerFor]="sortMenu">
      <mat-icon>sort</mat-icon>
      <span class="flex-1">{{ 'PAC.KEY_WORDS.Sort' | translate: {Default: 'Sort'} }}</span>
      <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
    </button>

    <button cdkMenuItem (click)="refresh(true)">
      <mat-icon fontSet="material-icons-round">refresh</mat-icon>
      {{ 'Story.Widget.Refresh' | translate: {Default: "Refresh"} }}
    </button>

    <button cdkMenuItem (click)="explain()">
      <mat-icon fontSet="material-icons-round">code</mat-icon>
      {{ 'Story.Widget.Explain' | translate: {Default: "Explain"} }}
    </button>
  </div>
</ng-template>

<ng-template #sortMenu>
  <div cdkMenu>
    <ngm-search [(ngModel)]="searchMeasure" />
    @for (measure of measures$ | async; track measure.name) {
      <button cdkMenuItem (click)="$event.stopPropagation();toggleMeasureSort(measure)">
        <ngm-entity-property [property]="measure" [highlight]="searchMeasure()" class="flex-1"/>
        @if (hasOrder()(measure); as order) {
          @if (!order.order || order.order === OrderDirection.ASC) {
            <mat-icon fontSet="material-icons">arrow_downward</mat-icon>
          } @else {
            <mat-icon fontSet="material-icons">arrow_upward</mat-icon>
          }
        }
      </button>
    }
  </div>
</ng-template>

<ng-template #topMenu>
  <div cdkMenu>
    @for (top of TOPS; track top) {
      <button cdkMenuItem (click)="toggleTop(top)">
        @if (rankTop() === top) {
          <mat-icon fontSet="material-icons">done</mat-icon>
        }
        <span class="flex-1 text-right">{{ 'PAC.KEY_WORDS.Top' | translate: {Default: 'Top'} }}{{top}}</span>
      </button>
    }
    <ngm-input class="mx-2" type="number" simple
      [label]=" 'PAC.KEY_WORDS.Top' | translate: {Default: 'Top'} " displayDensity="compact"
      [ngModel]="rankTop()"
      (ngModelChange)="setRankTop($event)"
    />
  </div>
</ng-template>